// src/pages/search/widgets/suggestion/item/index.tsx
import React from "react";
import GeekIcon from "@shared/geekIcon";
import { useNavigate } from "react-router-dom";
import { useTypedDispatch } from "@store/index";
import { addKey } from "@slice/searchKey";
interface Props {
  item: { origin: string; name: string };
}
export default function SuggestionItem({ item }: Props) {
  // 获取用于页面跳转的方法
  const navigate = useNavigate();
  // 获取 dispatch 方法
  const dispatch = useTypedDispatch();
  // 当点击联想关键词时执行的方法
  const search = () => {
    // 将联想关键字保存到搜索历史记录列表中
    dispatch(addKey({ name: item.origin }));
    // 跳转到搜索结果页面
    navigate(`/result/${item.origin}`);
  };
  return (
    <li onClick={search}>
      <GeekIcon type={"iconbtn_search"} />
      <div dangerouslySetInnerHTML={{ __html: item.name }}></div>
    </li>
  );
}